<template>
	<view class="contract-confirm">
		<view class="item">
			<view class="item-title color-1">基础信息</view>
			<view class="item-b">
				<span class="color-1 fix-1">房源：</span>
				<span class="color-1">{{form.info.houseName|| '--'}}</span>
			</view>
			<view class="item-b">
				<span class="color-1 fix-1">租客：</span>
				<span class="color-1">{{form.info.renterName|| '--'}}</span>
			</view>
			<view class="item-b">
				<span class="color-1 fix-1">交房时间：</span>
				<span class="color-1">{{timestamp(form.info.deliveryDate)}}</span>
			</view>
		</view>
		<view class="item padding">
			<view class="item-title color-1">房间资产</view>
			<view>
				<view>
					<view class="item-b1">
						<span class="color-1 box1">名称</span>
						<span class="color-1 box1">类别</span>
						<span class="color-1 box1">品牌</span>
						<span class="color-1 box1">单价</span>
						<!-- <span class="color-1">数量</span> -->
					</view>
					<view class="item-b1 border" style="padding-bottom: 20rpx;" v-for="(item,index) in form.info.roomAsset" :key="index">
						<span class="color-2 box1">{{item.name}}</span>
						<span class="color-2 box1">{{item.categoryName}}</span>
						<span class="color-2 box1">{{item.brand}}</span>
						<span class="color-2 box1">{{item.price}}</span>
					</view>
					<!-- <view class="item-block" @click="showMore" v-if="show">
						<image :src="$imgUrl + '/personal/show-more-icon.png'" class="icon-1" mode=""></image>
					</view> -->
				</view>
			</view>
		</view>
		<view class="item">
			<view class="item-title">水电煤计费</view>
			<view class="item-b">
				<span class="color-1">仪表盘</span>
				<span class="color-1 border-1">初始读数</span>
			</view>
			<view class="item-b2 border" v-for="(item,index) in form.info.meterFeesList" :key="index">
				<span class="color-2 span-wid">{{item.meterType}}</span>
				<span class="color-2 span-wid1">{{(item.meterCurrent).toFixed(4)}}</span>
				<span class="color-4 span-wid2" @click="look(item)">查看</span>
			</view>
			<!-- <view class="item-b2 border">
				<span class="color-2 span-wid">热水表</span>
				<span class="color-2 span-wid1">123.0000</span>
				<span class="color-4 span-wid2" @click="look(1)">查看</span>
			</view>
			<view class="item-b2 border">
				<span class="color-2 span-wid">冷水表</span>
				<span class="color-2 span-wid1">123.0000</span>
				<span class="color-4 span-wid2" @click="look(2)">查看</span>
			</view> -->
		</view>
		<view class="item">
			<view class="item-title" v-if="form.info.annexFile&&form.info.annexFile.length > 0">附件</view>
			<view  v-if="form.info.annexFile&&form.info.annexFile.length > 0">
				<image v-for="(item,index) in form.info.annexFile" @click="previewImage(item)" :key="index" :src="item" class="icon-2" mode=""></image>
			</view>
			<view class="btn" @click="confirmStay" v-if="form.info.deliveryStatus != 'delivered'">确认交房</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { stayContractGet, confirmContractGet} from '@/common/API/contract'
	import { onLoad} from "@dcloudio/uni-app"
	import { reactive,ref } from "vue";
	import dayjs from "dayjs"
	//处理时间戳
	const timestamp = (val:any,s) => {
		return !s ? dayjs(val).format('YYYY-MM-DD') : dayjs(val).format('YYYY-MM-DD HH:mm:ss')
	}
	const form = reactive({
		info: {
			annexFile: [],
			meterFeesList: [],
			houseName: null,
			renterName: null,
			deliveryDate: null,
			roomAsset: null,
			deliveryStatus: null,
			id:null
		},
		id: null
	})
	const list = ref(6)
	const show = ref(true)
	const showMore = () => {
		list.value = 8;
		show.value = false;
	}
	const look = (item) => {
		let url:any;
		switch (item.meterType){
			case '电表'://电表
				url = `/pages/personal/contract/detail/energy-meter?info=${encodeURIComponent(JSON.stringify(item))}`
				break;
			case '热水表'://热水表
				url = `/pages/personal/contract/detail/hot-water?info=${encodeURIComponent(JSON.stringify(item))}`
				break;
			case '冷水表'://冷水表
				url = `/pages/personal/contract/detail/cold-water?info=${encodeURIComponent(JSON.stringify(item))}`
				break;
			default:
				break;
		}
		uni.navigateTo({
			url: url
		})
	}
	
	const getConfirmation = async () => {
		let res = await stayContractGet(form.id)
		if(res){
			console.log(res)
			form.info.annexFile = res.annexFile//附件
			form.info.meterFeesList = res.meterFeesList//水电煤
			form.info.houseName = res.houseName//房源
			form.info.renterName = res.renterName//租住人
			form.info.deliveryDate = res.deliveryDate //交房确认时间
			form.info.deliveryStatus = res.deliveryStatus
			form.info.id = res.id
			if(res.roomAsset){
				form.info.roomAsset = JSON.parse(res.roomAsset) //房间资产
			}
		}
	}
	onLoad((options)=>{
		if(options){
			form.id = options.id
			getConfirmation()
		}
	})
	//预览
	const previewImage = (url) => {
		console.log(url)
		let arr = []
		arr[0] = url
		uni.previewImage({
			urls: arr,
			current:0
		})
	}
	//确认交房
	const confirmStay = async () => {
		uni.showLoading({
			mask: true
		})
		let res = await confirmContractGet(form.info.id)
		if(res){
			uni.hideLoading()
			uni.showToast({
			  title: "确认成功",
			  icon: "none"
			})
			getConfirmation()
		}
	}
</script>
<style lang="scss" scoped>
	.contract-confirm{
		.item{
			background: #fff;
			padding: 32rpx;
			margin-top: 20rpx;
			.item-title{
				color: rgba(0, 0, 0, 1);
				font-size: 30rpx;
				font-weight: bold;
				margin-bottom: 8rpx;
			}
			.icon-1{
				width: 40rpx;
				height: 18rpx;
			}
			.icon-2{
				width: 160rpx;
				height: 160rpx;
			}
			.item-b1{
				font-size: 30rpx;
				display: flex;
				justify-content: space-between;
			}
			.box1{
				width: 25%;
				display: inline-block;
				// text-align: center;
			}
			.item-b2{
				display: flex;
				// justify-content: space-between;
			}
			.color-1{
				color: rgba(0, 0, 0, 1);
			}
			.item-block{
				text-align: center;
				padding: 10rpx;
			}
			.color-2{
				color: rgba(102, 102, 102, 1);
				font-size: 26rpx;
			}
			.border{
				border-bottom: 1rpx solid rgba(242, 243, 245, 1);
				padding: 8rpx 0;
			}
			.color-4{
				color: rgba(19, 148, 244, 1);
			}
			.span-wid{
				width: 160rpx;
			}
			.span-wid1{
				width: 160rpx;
			}
			.border-1{
				margin-left: 70rpx;
			}
			.span-wid2{
				flex: 1;
				padding: 0 32rpx;
				text-align: right;
			}
		}
		.padding{
			padding-bottom: 0;
		}
		.btn{
			width: 400rpx;
			height: 84rpx;
			border-radius: 54rpx;
			background: rgba(253, 150, 24, 1);
			color: #fff;
			text-align: center;
			line-height: 84rpx;
			font-size: 28rpx;
			margin: 24rpx auto;
		}
	}
</style>